<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>淘宝首页</title>
		<style>
			@font-face {
				font-family: iconfont;
				src: url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.eot);
				src: url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.eot?#iefix) format('embedded-opentype'), url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.woff) format('woff'), url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.ttf) format('truetype'), url(//at.alicdn.com/t/font_403341_n8tj33yn5peng66r.svg#iconfont) format('svg');
			}
			
			.iconfont {
				font-family: iconfont;
				font-size: 14px;
			}	
			body,dd,dl,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,ol,p,
				select,td,textarea,th,ul{
							margin:0;padding:0;}
			/**{
				border: 1px solid red;
			}*/
			body{
				background: #f4f4f4;
				}
			a {
				display: block;
				color: black;
				text-decoration: none;
			}
			.top .rtxt a:hover{
				color: orange;
			}
			.clearfix:after {
				display: table;
				content: "";
				clear: both;
			}
			.fl {
				float: left;
			}
			.fr {
				float: right;
			}
			.img {
				float: left;
			}
			.box {
				width: 990px;
				margin: 0px auto;	
			}
			ul {
				width: 490px;
				margin-top: 17px;
			}
			.f2 {
				width: 148px;
				float: left;
			}
			.top {
				width: 490px;
				margin-top:20px;
			}
			.col{
				width: 490px;
				float: left;
				background: white;
				box-sizing: border-box;
				padding: 10px 17px 10px 21px;
			}
			.top a{
				margin-right: 40px;
			}
			.top img{
				height: 24px;
			}
			.top>*{
				height: 24px;
				line-height: 24px;
			}
			img{
				vertical-align: middle;
			}
			.top .txt{
				color: #999;
				font-size: 12px;
			}
			.top .txt a{
				color: #999;
				font-size: 12px;
			}
			.top .iconfont{
				font-size: 20px;
				color: #ccc;
				margin-left: 12px;
			}
			.img2{
				width: 148px;
				height: 148px;
				background-color: #999999;
				box-sizing: border-box;	
			}
			.img2 img{
				width: 148px;
				height: 148px;
				opacity: 0.9;
			}
			.img2:hover img{
				opacity: 0.8;
			}
			.f2:hover .p1{
				color: #f40;
			}
			.col:first-child{
				margin-right:10px;
			}
			.f2{
				float: left;
				width: 148px;
				margin-right: 4px;
				margin-top: 17px;
				margin-bottom: 17px;
			}
			.p1{
				font-size: 14px;
				margin-top: 8px;
				h
			}	
			.p2{
				font-size: 12px;
				color: #999;
			}
			.p3{
				font-size: 12px;
				color:#35b1ff;
				height: 20px;
				line-height: 20px;
			}
			.p3 img{
				width: 12px;
				height: 12px;
			}
			span{
				color: #ccc;
			}
		</style>
	</head>
<body>
		<div class="box clearfix">
		<div class="col">
			<div class="top clearfix">
				<div class="img fl"><img src="image/youhaohuo.png" /><span class="iconfont">&#xe610;</span></div>
				<div class="txt ltxt fl">与生活品质不期而遇</div>
				<div class="txt rtxt fr">
					<a href="#">换一换</a>
				</div>
			</div>
			<ul class="clearfix">
				<a href="Taobao2.html" class="f2">
					<div class="img2">
						<img src="image/1.webp" />
					</div>
					<p class="p p1">TAMMYTANGS皮衣外</p>
					<p class="p p2">颜色很独特的一款收腰绑带</p>
					<p class="p p3"><span class="iconfont">&#xe676;</span>0人说好</p>
				</a>
				<a href="#" class="f2">
					<div class="img2">
						<img src="image/2.webp" />
					</div>
					<p class="p p1"><img src="image/icon.png">【秋季新态</p>
					<p class="p p2">陌上开花，生活在左文艺绣</p>
					<p class="p p3"><span class="iconfont">&#xe676;</span>11人说好</p>

				</a>
				<a href="#" class="f2">
					<div class="img2">
						<img src="image/3.webp" />
					</div>
					<p class="p p1"><img src="image/icon.png">Lily条纹印花</p>
					<p class="p p2">经典条纹元素与特色印花设</p>
					<p class="p p3"><span class="iconfont">&#xe676;</span>9人说好</p>

				</a>

				<a href="#" class="f2">
					<div class="img2">
						<img src="image/4.webp" />
					</div>
					<p class="p p1">太平鸟罗纹夹克式棉服</p>
					<p class="p p2">精致的罗纹领口，自带按扣</p>
					<p class="p p3"><span class="iconfont">&#xe676;</span>0人说好</p>

				</a>
				<a href="#" class="f2">
					<div class="img2">
						<img src="image/5.webp" />
					</div>
					<p class="p p1">ONE MORE立领羊毛大</p>
					<p class="p p2">小立领衬托优雅知性气质，</p>
					<p class="p p3"><span class="iconfont">&#xe676;</span>0人说好</p>

				</a>
				<a href="#" class="f2">
					<div class="img2">
						<img src="image/6.webp" />
					</div>
					<p class="p p1"><img src="image/icon.png">斜纹双排扣棉</p>
					<p class="p p2">颜色很独特的一款收腰绑带</p>
					<p class="p p3"><span class="iconfont">&#xe676;</span>35人说好</p>
				</a>
			</ul>
			</div>
			<div class="col">
				<div class="top clearfix">
					<div class="img fl"><img src="image/aiguangjie.png" /></div>
					<div class="txt ltxt fl">献给聪明可爱的你</div>
					<div class="txt rtxt fr">
						<a href="#">更多<span class="iconfont">&#xe62e;</span></a>
					</div>
				</div>
				<ul class="clearfix">
					<a href="#" class="f2">
						<div class="img2">
							<img src="image/7.webp" />
						</div>
						<p class="p p1"><span class="iconfont">&#xe621;</span>熊孩子芒果干4袋水</p>
						<p class="p p2">蜜饯果脯果干芒果片好吃</p>
						<p class="p p3"><img src="image/touxiang1.jpg">潮流女孩girl</p>
					</a>
					<a href="#" class="f2">
						<div class="img2">
							<img src="image/8.webp" />
						</div>
						<p class="p p1"><img src="image/icon.png"><span class="iconfont">&#xe621;</span>ROZO双眉</p>
						<p class="p p2">不脱色自然持久一字眉初学</p>
						<p class="p p3"><img src="image/touxiang2.jpg">放飞自我的兔小姐</p>

					</a>
					<a href="#" class="f2">
						<div class="img2">
							<img src="image/9.webp" />
						</div>
						<p class="p p1"><img src="image/icon.png"><span class="iconfont">&#xe621;</span>花花公子纯</p>
						<p class="p p2">真皮自动扣韩版青年学生裤</p>
						<p class="p p3"><img src="image/touxiang1.jpg">潮流女孩girl</p>

					</a>

					<a href="#" class="f2">
						<div class="img2">
							<img src="image/10.webp" />
						</div>
						<p class="p p1"><span class="iconfont">&#xe621;</span>瑞虎染发剂植物一洗</p>
						<p class="p p2">洗发水天然无刺激自然黑</p>
						<p class="p p3"><img src="image/touxiang1.jpg">潮流女孩girl</p>

					</a>
					<a href="#" class="f2">
						<div class="img2">
							<img src="image/11.webp" />
						</div>
						<p class="p p1"><span class="iconfont">&#xe621;</span>火烈鸟不可思议睫毛</p>
						<p class="p p2">持久自然纤长浓密防水卷翘</p>
						<p class="p p3"><img src="image/touxiang2.jpg">放飞自我的兔小姐</p>

					</a>
					<a href="#" class="f2">
						<div class="img2">
							<img src="image/12.webp" />
						</div>
						<p class="p p1"><span class="iconfont">&#xe621;</span>Real Techniques多</p>
						<p class="p p2">水滴海绵彩妆美蛋RT两</p>
						<p class="p p3"><img src="image/touxiang3.jpg">爱逛街***01</p>
					</a>
				</ul>
			</div>
		</div>

	</body>

</html>